<template>
  <div class="detail-demo">
    <div class="status" :class="[fmtDict(info.auditStatus, store.state.dict['audit_status'], 'cssClass')]"></div>
    <h3 class="title">{{ props.title }}</h3>
    <div class="centent" :class="{ 'has-action-barsolt': slots['action-bar'] }">
      <van-cell title="姓名" :value="info.xm" />
      <van-cell title="性别" :value="fmtDict(info.gender, store.state.dict['sys_user_sex'])" />
      <van-cell title="手机号码" :value="info.phone" />
      <van-cell title="证件号码" :value="info.sfhm" />
      <van-cell title="住址" :value="info.zz" />
    </div>
    <slot name="action-bar"></slot>
  </div>
</template>

<script lang="ts">
export default {
  name: 'CrudDetailDemo'
}
</script>

<script setup lang="ts">
import { useSlots, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { Notify, Toast } from 'vant'
import { loadDetail } from '@/api/demo'
import type { RequestType } from '@/api/api'
import { fmtDict } from '@/utils/filter'
import { useStore } from '@/store/index'

const route = useRoute()

const props = defineProps({
  title: {
    type: String,
    default: '详情'
  }
})

const slots = useSlots()

const store = useStore()

const info: RequestType<typeof loadDetail> = reactive({
  id: '',
  xm: '',
  gender: 0,
  phone: '',
  sfhm: '',
  zz: '',
  auditStatus: 0
})

onMounted(() => {
  if (route.query.id && !Array.isArray(route.query.id)) {
    getDetail(route.query.id)
  } else {
    Notify({
      type: 'warning',
      message: '缺少必要参数id'
    })
  }
})

const getDetail = async (id: string) => {
  const loading = Toast.loading({
    message: '加载中...',
    forbidClick: true
  })
  try {
    const { data } = await loadDetail(id)
    Object.assign(info, data)
  } catch (error) {
    console.error('error =>', error)
  } finally {
    loading.clear()
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/form.scss';
.detail-demo {
  position: relative;
  @include status-watermark;

  .status {
    position: absolute;
    top: 15px;
    right: 15px;
  }
}
.centent {
  height: calc(100vh - 90px);
  margin: 16px 0;
  padding: 0 16px;
  overflow-y: auto;
}

.has-action-barsolt {
  height: calc(100vh - 90px - 68px);
}
</style>
